/*
 由于改变了原来的margin，所以在这里重新计算了每一块的宽度
 * */
function calcWidth(row){
	var mainWidth = $(window).width();
	var spanNum = $("[class*='span']",row).length;
	var mgLeft = $("[class*='span']",row).css("margin-left");
	var mgRight = $("[class*='span']",row).css("margin-right");
	var mg =parseFloat(parseFloat(mgLeft) * parseFloat(spanNum) + parseFloat(mgRight) * parseFloat(spanNum));
	var contentWidth = parseFloat(mainWidth - mg);
	var singleWidth = parseFloat(parseFloat(contentWidth) / 12);
	$(".span1",row).css('width' , parseFloat(singleWidth) + 'px');
	$(".span2",row).css('width' , parseFloat(singleWidth) * 2 + 'px');
	$(".span3",row).css('width' , parseFloat(singleWidth) * 3 + 'px');
	$(".span4",row).css('width' , parseFloat(singleWidth) * 4 + 'px');
	$(".span5",row).css('width' , parseFloat(singleWidth) * 5 + 'px');
	$(".span6",row).css('width' , parseFloat(singleWidth) * 6 + 'px');
	$(".span7",row).css('width' , parseFloat(singleWidth) * 7 + 'px');
	$(".span8",row).css('width' , parseFloat(singleWidth) * 8 + 'px');
	$(".span9",row).css('width' , parseFloat(singleWidth) * 9 + 'px');
	$(".span10",row).css('width' , parseFloat(singleWidth) * 10 + 'px');
	$(".span11",row).css('width' , parseFloat(singleWidth) * 11 + 'px');
	$(".span12",row).css('width' , parseFloat(singleWidth) * 12 + 'px');
};

function drawChart1(c1){
	option1 = {
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)",
	        position:function(p){   //其中p为当前鼠标的位置
	            return [p[0] + 20, p[1] - 20];
	        }
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        textStyle:{
	    		color:"#fff",
	    		fontSize:'12px'
	    	},
	        data: ['门急诊收入','住院收入']
	    },
	    series : [
	        {
	            name: '收入情况',
	            type: 'pie',
	            radius : '80%',
	            center: ['50%', '55%'],
	            hoverOffset:10,
	            selectedMode: 'single',
	            label: {
	                normal: {
	                    position: 'inner'
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:[
	                {value:435, name:'住院收入'},
	                {value:234, name:'门急诊收入',selected:true}
	            ],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                },
	                normal:{
	                    color: function(params) {
	                        // build a color map as your need.
	                        var colorList = ['#3EAA74','#B2522E','#17769D'];
	                        return colorList[params.dataIndex];
	                    }
	                }
	            }
	        }
	    ]
	};
	c1.setOption(option1);
}

function drawChart2(c10){
	option2 = {
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)",
	        position:function(p){   //其中p为当前鼠标的位置
	            return [p[0] + 20, p[1] - 20];
	        }
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        textStyle:{
	    		color:"#fff",
	    		fontSize:'12px'
	    	},
	        data: ['门诊城保','住院城保','其他']
	    },
	    series : [
	        {
	            name: '医保概览',
	            type: 'pie',
	            radius : '80%',
	            center: ['50%', '55%'],
	            label: {
	                normal: {
	                    position: 'inner'
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:[
	                {value:543, name:'住院城保',selected:true},
	                {value:345, name:'门诊城保'},
	                {value:120, name:'其他'}
	            ],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                },
	                normal:{
	                    color: function(params) {
	                        // build a color map as your need.
	                        var colorList = ['#3EAA74','#B2522E','#17769D'];
	                        return colorList[params.dataIndex];
	                    }
	                }
	            }
	        }
	    ]
	};
	c10.setOption(option2);
}

function drawCircle(chartObj,rdData){
	var option = {
	    title: {
	        text: rdData.text,
	        x: 'center',
	        y: 'center',
	        textStyle : {
	            textAlign:'center',
	            color : '#fff',
	            fontFamily : '微软雅黑',
	            fontSize : 12
	        }
	    },
	    tooltip: {
	       show:false,
	        trigger: 'item',
	        formatter: "{a} <br/>{b}: {c} ({d}%)"
	    },
	    series: [
	        {
	            type:'pie',
	            radius: ['70%', '80%'],
	            avoidLabelOverlap: false,
	            hoverAnimation:false,
	            silent:true,
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center',
	                    textStyle:{
	                        fontSize:32,
	                        color:'green'
	                    }
	                },
	                emphasis: {
	                    show: true,
	                    textStyle: {
	                        fontSize: '14',
	                        fontWeight: 'bold',
	                        color:'#fff'
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:rdData.data,
	            itemStyle:{
	                normal:{
	                    color: function(params) {
	                        // build a color map as your need.
	                        var colorList = rdData.colors;
	                        return colorList[params.dataIndex];
	                    }
	                }
	            }
	        }
	    ]
	};
	chartObj.setOption(option);
}

function switchChart(chartObj,option,childObj1,childObj2){
	chartObj.on('click',function(params){
		var index = params.dataIndex;
		console.log(index);
		if(index == 0){
			$(childObj1).css("visibility","hidden");
			$(childObj2).css("visibility","visible");
			for(var i = 0 ; i < option.series[0].data.length ; i++){
				option.series[0].data[i].selected = false;		
			}
			option.series[0].data[index].selected = true;
			chartObj.setOption(option);
		}else if(index == 1){
			$(childObj2).css("visibility","hidden");
			$(childObj1).css("visibility","visible");
			for(var i = 0 ; i < option.series[0].data.length ; i++){
				option.series[0].data[i].selected = false;				
			}
			option.series[0].data[index].selected = true;
			chartObj.setOption(option);
		}
	});
}

function drawChart19(chartObj){
	var category = [];
	var lineData = [];
	var dottedBase = +new Date();
	for (var i = 0; i < 30; i++) {
	    var date = new Date(dottedBase += 3600 * 24 * 1000);
	    category.push([
//	        date.getFullYear(),
//	        date.getMonth(),
	        date.getDate()
	    ]);
//	    .join('-'))
		var b = Math.random() * 200;
    	var d = Math.random() * 200;
    	lineData.push(parseInt(d + b));
	}
	var option = {
	    tooltip : {
	        trigger: 'axis'
	    },
	    calculable : true,
	    grid:{
	    	top:'10'
	    },
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	           axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        },
	            data : category
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        }
	        }
	    ],
	    series : [
	        {
	            name:'门诊流量',
	            type:'bar',	        
	            itemStyle: {
		            normal:{
		            	color:'rgba(193,85,82,.7)'
		            }
		        },
	            data:lineData
	        }	      
	    ]
	};
	chartObj.setOption(option);
}

function drawChart20(chartObj){
	var category = [];
	var lineData = [];
	var lineData2 = [];
	var dottedBase = +new Date();
	for (var i = 0; i < 30; i++) {
	    var date = new Date(dottedBase += 3600 * 24 * 1000);
	    category.push([
//	        date.getFullYear(),
//	        date.getMonth(),
	        date.getDate()
	    ]);
//	    .join('-'))
		var b = Math.random() * 200;
    	var d = Math.random() * 200;
    	var e = Math.random() * 200;
    	var f = Math.random() * 200;
    	lineData.push(parseInt(d + b));
    	lineData2.push(parseInt(e + f));
	}
	var option = {
	    tooltip : {
	        trigger: 'axis'
	    },
	    calculable : true,
	    grid:{
	    	top:'10'
	    },
	    xAxis : [
	        {
	            type : 'category',
	            boundaryGap : false,
	           axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        },
	            data : category
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        }
	        }
	    ],
	    series : [
	        {
	            name:'出院流量',
	            type:'line',	        
	            itemStyle: {
		            normal: {
		                color: 'rgb(222,118,39)'
		            }
		        },
	            data:lineData
	        },	   
	        {
	            name:'入院流量',
	            type:'line',	        
	            itemStyle: {
		            normal: {
		                color: 'rgb(20,200,212)'
		            }
		        },
	            data:lineData2
	        }
	    ]
	};
	chartObj.setOption(option);
}

/*
	setTbodyHeight() 计算表格的高度
	参数row代表区块
	参数tableTitle代表表格名称，一个h4标签
	参数tbody代表表格内容区域
 * */
function setTbodyHeight(row,tableTitle,tbody){
	var rowHeight = $(row).height();
	var tableTitleHeight = $(tableTitle).outerHeight(true);
	var theadHeight = $(row).find(".t-head").outerHeight(true);
	var tbodyHeight = rowHeight - tableTitleHeight - theadHeight - 5 + "px";    //这里减了一个5像素
	$(tbody).css("height",tbodyHeight);
}

$(function(){
	var rdData1 = {
		text:'40%',
		data:[{value:'40',name:'完成率'},{value:'100',name:'所有占比'}],
	    colors:['#ff8888','#3B3E48']
	};
	var rdData2 = {
		text:'54%',
		data:[{value:'54',name:'完成率'},{value:'100',name:'完成率'}],
	    colors:['#e6ff99','#3B3E48']
	};
	var rdData3 = {
		text:'65%',
		data:[{value:'65',name:'完成率'},{value:'100',name:'完成率'}],
	    colors:['#a6ff6e','#3B3E48']
	};
	var rdData4 = {
		text:'59%',
		data:[{value:'59',name:'完成率'},{value:'100',name:'完成率'}],
	    colors:['#c06dff','#3B3E48']
	};
	var rdData5 = {
		text:'32%',
		data:[{value:'32',name:'完成率'},{value:'100',name:'所有占比'}],
	    colors:['#ff8888','#3B3E48']
	};
	var rdData6 = {
		text:'78%',
		data:[{value:'78',name:'完成率'},{value:'100',name:'完成率'}],
	    colors:['#e6ff99','#3B3E48']
	};
	var rdData7 = {
		text:'65%',
		data:[{value:'65',name:'完成率'},{value:'100',name:'完成率'}],
	    colors:['#a6ff6e','#3B3E48']
	};
	var rdData8 = {
		text:'23%',
		data:[{value:'23',name:'完成率'},{value:'100',name:'完成率'}],
	    colors:['#c06dff','#3B3E48']
	};
	var rdData9 = {
		text:'15026',
		data:[{value:'15026',name:'完成率'},{value:'16000',name:'完成率'}],
	    colors:['#649D12','#3B3E48']
	};
	var rdData10 = {
		text:'83472',
		data:[{value:'83472',name:'完成率'},{value:'100000',name:'完成率'}],
	    colors:['#D65A29','#3B3E48']
	};
	var rdData11 = {
		text:'225',
		data:[{value:'225',name:'完成率'},{value:'400',name:'完成率'}],
	    colors:['#D8275D','#3B3E48']
	};
	var rdData12 = {
		text:'95',
		data:[{value:'95',name:'完成率'},{value:'130',name:'完成率'}],
	    colors:['#D6D631','#3B3E48']
	};
	var rdData13 = {
		text:'11890',
		data:[{value:'11890',name:'完成率'},{value:'16000',name:'完成率'}],
	    colors:['#649D12','#3B3E48']
	};
	var rdData14 = {
		text:'67821',
		data:[{value:'67821',name:'完成率'},{value:'100000',name:'完成率'}],
	    colors:['#D65A29','#3B3E48']
	};
	var rdData15 = {
		text:'320',
		data:[{value:'320',name:'完成率'},{value:'400',name:'完成率'}],
	    colors:['#D8275D','#3B3E48']
	};
	var rdData16 = {
		text:'56',
		data:[{value:'56',name:'完成率'},{value:'130',name:'完成率'}],
	    colors:['#D6D631','#3B3E48']
	};
	
	calcWidth("#row5");
	calcWidth("#row6");
	calcWidth("#row7");
	
	var c1 = echarts.init(document.getElementById("chart1"));
	var c2 = echarts.init(document.getElementById("chart2"));
	var c3 = echarts.init(document.getElementById("chart3"));
	var c4 = echarts.init(document.getElementById("chart4"));
	var c5 = echarts.init(document.getElementById("chart5"));
	var c6 = echarts.init(document.getElementById("chart6"));
	var c7 = echarts.init(document.getElementById("chart7"));
	var c8 = echarts.init(document.getElementById("chart8"));
	var c9 = echarts.init(document.getElementById("chart9"));
	var c10 = echarts.init(document.getElementById("chart10"));	
	var c11 = echarts.init(document.getElementById("chart11"));
	var c12 = echarts.init(document.getElementById("chart12"));
	var c13= echarts.init(document.getElementById("chart13"));
	var c14 = echarts.init(document.getElementById("chart14"));	
	var c15 = echarts.init(document.getElementById("chart15"));
	var c16 = echarts.init(document.getElementById("chart16"));
	var c17= echarts.init(document.getElementById("chart17"));
	var c18 = echarts.init(document.getElementById("chart18"));	
	var c19 = echarts.init(document.getElementById("chart19"));	
	var c20 = echarts.init(document.getElementById("chart20"));	
	
	
	drawChart1(c1);
	drawChart2(c10);
	drawCircle(c2,rdData1);
	drawCircle(c3,rdData2);
	drawCircle(c4,rdData3);
	drawCircle(c5,rdData4);
	drawCircle(c6,rdData5);
	drawCircle(c7,rdData6);
	drawCircle(c8,rdData7);
	drawCircle(c9,rdData8);
	drawCircle(c11,rdData9);
	drawCircle(c12,rdData10);
	drawCircle(c13,rdData11);
	drawCircle(c14,rdData12);
	drawCircle(c15,rdData13);
	drawCircle(c16,rdData14);
	drawCircle(c17,rdData15);
	drawCircle(c18,rdData16);
	switchChart(c1,option1,'#child1','#child2');
	switchChart(c10,option2,'#child3','#child4');
	drawChart19(c19);
	drawChart20(c20);
	setInterval('drawChart20(echarts.init(document.getElementById("chart20"))),drawChart19(echarts.init(document.getElementById("chart19")))',5000);
	
	setTbodyHeight("#row7","#tableTitle","#tBody");
});
